<template>
  <!-- “课程大纲”页面的添加课时[对话框]页面，对应的步骤条是"创建课程大纲" -->
  <div>
    <!-- 从Elenment官网的Dialog 对话框，[添加课时]对话框 -->
    <!-- dialogFormVisible是对话框是否显示 -->
    <el-dialog :visible.sync="dialogFormVisible" :title="title">
      <el-form :model="video">
        <el-form-item :label-width="formLabelWidth" label="课时标题">
          <el-input v-model="video.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="课时排序">
          <el-input-number v-model="video.sort" :min="0"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="是否免费">
          <el-radio v-model="video.free" :label="1">免费</el-radio>
          <el-radio v-model="video.free" :label="0">收费</el-radio>
        </el-form-item>
        <!-- 上传视频 -->
        <el-form-item :label-width="formLabelWidth" label="上传视频">
          <el-upload
            ref="upload"
            :before-remove="handleBeforeRemove"
            :on-remove="handleOnRemove"
            :auto-upload="false"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :limit="1"
            action="http://127.0.0.1:8130/admin/vod/media/upload">
            <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
            <el-button
              :disabled="uploadBtnDisabled"
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload()">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <!-- :disabled="disabled"是按钮是否禁用 -->
        <el-button :disabled="disabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入video.js，进行课时的CRUD
import videoApi from '@/api/video'
import vodApi from '@/api/vod'
export default {
  data() {
    return {
      // 对话框页面[也就是Video/From.vue页面]添加到[Chapter/index.vue页面]时默认不显示，当点击[添加课时]按钮、[编辑]按钮时才弹出
      dialogFormVisible: false,
      // [添加课时]按钮、[编辑]按钮共用一个对话框，动态取标题
      title: '添加课时',
      // 为对话框中的课时标题提供边框样式
      formLabelWidth: '80px',
      // 用来封装课时对象信息
      video: {
        sort: 0, // 排序默认显示值为0
        free: 0// 是否收费默认显示值为0，也就是收费
      },
      // 对话框中的[确定]按钮，默认不禁用
      disabled: false,
      // 用来封装上传视频的List数组
      fileList: [],
      /*
       视频的[上传]按钮，默认禁用掉，只有上传视频[也就是fileList有值的时候，才启用上传按钮，防止没有上传视频，用户瞎点一次，在submitUpload()就被禁用按钮]
      待实现
      */
      uploadBtnDisabled: false
    }
  },
  methods: {
    // 关闭对话框，同时也是对话框中[取 消]按钮的单击响应事件
    close() {
      this.dialogFormVisible = false
      // 重置视频上传的列表
      this.fileList = []
    },
    // 打开对话框
    open() {
      this.dialogFormVisible = true
    },
    // 1、函数一：对话框中[确 定]按钮的单击响应事件，判断是添加，还是更新
    saveOrUpdateVideo() {
      // （1）调用函数，就禁用[确定]按钮，防止重复提交
      this.disabled = true
      // （2）根据videoId，判断是添加，还是更新
      if (this.video.id) {
        // （3）当videoId存在，说明数据库有Video记录，调用更新的函数
        this.updateVideo()
      } else {
        // （4）当videoId不存在，说明数据库没有Video记录，调用添加的函数
        this.saveVideo()
      }
    },
    // 2、函数二：更新Video
    updateVideo() {
      // （1）更新，说明数据库已经有Video对象数据，已经存在courseId和chapterId
      // （2）向后端发送更新数据的请求，携带video对象作为参数
      videoApi.updateVideo(this.video).then(response => {
        // （6）刷新父组件页面[Chapter/index.vue]中的章节课时列表
        this.$parent.getChapterNestedList()
        // （3）请求成功，给出提示信息
        this.$message.success('更新课时成功')
        // （4）关闭对话框
        this.close()
        // （5）清除缓存，以便再次打开对话框时，会显示上一次的缓存数据
        this.video = {
          sort: 0,
          free: 0
        }
        /*
         （7）启用对话框中的[确定]按钮，因为在函数saveOrUpdateVideo()中，
              已经禁用[确定]按钮，需重新启用，防止发送请求不成功时，再次更新[确定]按钮不可用
         */
        this.disabled = false
      })
    },
    // 3、函数三：添加Video
    saveVideo() {
      console.log(this.video)
      /*
       （1）添加，说明数据库没有Video对象数据，需要向后端传送courseId和chapterId，
       以在数据库表edu_video中，绑定课时对应的课程和章节
       chapterId在[Chapter/index.vue]的[添加课时]按钮的单击响应事件addVideo(chapterId)中传递过来
       */
      this.video.courseId = this.$parent.$parent.courseId
      // （2）向后端发送添加数据的请求，携带video对象作为参数
      videoApi.saveVideo(this.video).then(response => {
        // （6）刷新父组件页面[Chapter/index.vue]中的章节课时列表
        this.$parent.getChapterNestedList()
        // （3）请求成功，给出提示信息
        this.$message.success('添加课时成功')
        // （4）关闭对话框
        this.close()
        // （5）清除缓存，以便再次打开对话框时，会显示上一次的缓存数据
        this.video = {
          sort: 0,
          free: 0
        }
        /*
         （7）启用对话框中的[确定]按钮，因为在函数saveOrUpdateVideo()中，
              已经禁用[确定]按钮，需重新启用，防止发送请求不成功时，再次更新[确定]按钮不可用
         */
        this.disabled = false
      })
    },
    // 4、函数四：根据id查询课时，更新时进行回显
    // index.vue页面在调用此函数时，会传videoId过来
    getVideo(videoId) {
      // （1）让对话框的标题，变成'更新课时'
      this.title = '更新课时'
      videoApi.getVideo(videoId).then(response => {
        this.video = response.data.item
        // false:表示收费   true表示免费
        this.video.free = response.data.item.free ? 1 : 0
        this.open()
        // 视频回显
        if (this.video.videoOriginalName) {
          // 如果数据库中存在videoOriginalName，取出来赋值给fileList中name属性
          this.fileList = [{ 'name': response.data.item.videoOriginalName }]
        }
      })
      // 接下来前往父组件页面[Chapter/index.vue]进行课时的CRUD即可
    },
    // 视频上传成功时的回调函数
    handleUploadSuccess(response, file, fileList) {
      // （1）上传成功后，恢复按钮的使用
      this.uploadBtnDisabled = false
      console.log(response)
      // （2）后端返回的状态码为20000，都代表成功，所以还得判断一下
      if (response.success) {
        // ① 当响应报文中的success为true，也就是状态码是20000时，代表上传成功
        this.$message.success('视频上传成功')
        // 取出视频Id，赋值给当前Vue对象的video中的属性videoSourceId【跟数据库字段、JavaBean属性一致】
        this.video.videoSourceId = response.data.videoId
        // 取出视频Name，赋值给当前Vue对象的video中的属性videoOriginalName【跟数据库字段、JavaBean属性一致】
        // 在response中没有name，在file中有name[Element提供好的]
        this.video.videoOriginalName = file.name
      } else {
        // ②当响应报文中的success为false，也就是状态码不是20000时，代表上传失败
        this.$message.error('上传失败1')
      }
      // （3）当视频上传成功后，再次点击[添加课时]时，清除掉fileList中的缓存，在关闭对话框[也就是close()中]的时候进行清空，
      /*
       （4）当视频上传成功后，点击[编辑]【单击响应事件在Chapter/index.vue中】时，
            希望视频名称能够回显，在打开对话框[也就是open()中]的时候进行回显
            [编辑]按钮又调用了当前页面getVideo(videoId)，进行数据收集，也调用了open()
            所以在当前页面getVideo(videoId)中，进行收集视频Name，进行回显即可
      */
    },
    // 视频上传失败时的回调函数
    handleUploadError(err, file, fileList) {
      console.log(err)
      this.uploadBtnDisabled = false
      // 发送请求时失败
      this.$message.error('上传失败2')
    },
    // 视频上传数目超出限制时的回调函数
    handleUploadExceed() {
      this.$message.warning('一次只能上传一个视频')
    },
    // 视频上传的[上传]按钮单击响应事件函数
    submitUpload() {
      // （1）进入按钮提交的函数，禁用按钮，防止多次提交上传
      // this.uploadBtnDisabled = true
      // （2）调用<el-upload>的提交函数[Element的'Upload 上传'组件提供好的方法]submit()
      this.$refs.upload.submit()
    },
    // 删除视频文件确认
    handleBeforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 执行视频文件的删除
    handleOnRemove() {
      if (!this.video.videoSourceId) {
        return
      }
      vodApi.removeByVodId(this.video.videoSourceId).then(response => {
        // this.video.videoSourceId = ''
        // this.video.videoOriginalName = ''
        // videoApi.updateById(this.video)
        this.$message.success(response.message)
      })
    }
  }
}
</script>

